<template>
  <div>
<!--    流式布局-->
    <el-row :gutter="10" style="margin-bottom: 40px;">

      <el-col :span="6">
        <el-card style="color: #409EFF">
          <div><i class="el-icon-user-solid"/> 用户总数</div>
          <div class="cardHeader">{{ users }}</div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card style="color: #67C23A">
          <div><i class="el-icon-money"/> 销售总量</div>
          <div class="cardHeader">￥ 10000</div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card style="color: #E6A23C">
          <div><i class="el-icon-bank-card"/> 收益总额</div>
          <div class="cardHeader">￥ 30000</div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card style="color: #F56C6C">
          <div><i class="el-icon-s-shop"/>总上架商品</div>
          <div class="cardHeader">{{ Goods }}</div>
        </el-card>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="12">
        <el-card id="boxLine" style="display:inline-block; width: 700px; height: 600px;">
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card id="boxPie" style="display:inline-block; width: 700px; height: 600px;right: -50px;">
        </el-card>
      </el-col>

    </el-row>

  </div>
</template>

<script>
export default {
  name: "Home",
  data(){
    return{
      //添加线型图
      mainOption:{
        title: {
          top: '3%',
          text: '各季度h会员数量统计图',
          subtext: '趋势图',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ["第一季度","第二季度","第三季度","第四季度",]
        },
        tooltip: {
          trigger: 'item'   //鼠标发到点上会显示具体数值
        },
        legend: {    //提取数据内的name展示
          top: '4%',
          orient: 'vertical',
          left: 'left'
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '星巴克',
            data: [],
            type: 'line'
          },
          {
            name: '星巴克',
            data: [],
            type: 'bar'
          },
          {
            name: '瑞幸咖啡',
            data: [],
            type: 'line'
          },
          {
            name: '瑞幸咖啡',
            data: [],
            type: 'bar'
          }
        ]
      },

      //添加饼状图
      boxPieOption: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '星巴克',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center',
              normal: {
                show: true,
                formatter: '{b}: ({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: []
          },
          {
            name: '瑞星咖啡',
            type: 'pie',
            radius: ['30%', '15%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center',
              normal: {
                show: true,
                formatter: '{b}:({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      },

      //用户数量
      users: 0,
      Goods:0,

    }
  },
  created() {
    this.getUsers()
    this.getGoods()
  },
  mounted() { //页面元素渲染完了后触发

    //测试数据
    // this.request.get("/echarts/example").then(res=>{
    //   this.mainOption.xAxis.data = res.data.x;
    //   this.mainOption.series[0].data = res.data.y;
    //   this.mainOption.series[1].data = res.data.y;
    //   this.getEcharts("boxLine",this.mainOption);
    // })
    this.request.get("/echarts/members").then(res=>{
      this.mainOption.series[0].data = res.data;
      this.mainOption.series[1].data = res.data;

      this.mainOption.series[2].data = [5,9,3,1];
      this.mainOption.series[3].data = [5,9,3,1];
      this.getEcharts("boxLine",this.mainOption);

      this.boxPieOption.series[0].data=[
          {name: "第一季度", value: res.data[0]},
          {name: "第二季度", value: res.data[1]},
          {name: "第三季度", value: res.data[2]},
          {name: "第四季度", value: res.data[3]},
          ]
      this.boxPieOption.series[1].data=[
        {name: "第一季度", value: 7},
        {name: "第二季度", value: 6},
        {name: "第三季度", value: 9},
        {name: "第四季度", value: 1},
      ]

      this.getEcharts("boxPie",this.boxPieOption);
    })


  },
  methods:{
    //绘制echarts图形
    getEcharts(dowID,options){
      var chartDom = document.getElementById(dowID);
      var myChart = this.$echarts.init(chartDom);
      var option = options;
      myChart.setOption(option);
      return myChart;
    },
    // //请求echarts内的数据
    // getEchartsValue(){
    //
    // }
    getUsers(){
      this.request.get('/user').then(res=>{
        if(res.code ==="200" ){
          this.users = res.data.length;
      }
      })
    },
    getGoods(){
      this.request.get('/goods').then(res=>{
        if(res.code ==="200" ){
          this.Goods = res.data.length;
        }
      })
    }
  }

}

</script>

<style scoped>
.cardHeader{
  padding: 10px 0;
  text-align: center;
  font-weight: bold;
  font-size: 20px;

}
</style>